<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta content="telephone=no" name="format-detection" />
    <!-- 留作将来统一添加 -->
    <TEMPLATE>${TEMPLATE}</TEMPLATE>
    <title>模板html</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css">
    <link rel="stylesheet" type="text/css" href="../../css/index.css">
    <link rel="stylesheet" type="text/css" href="../../css/data-flex.min.css">
    <style type="text/css">
        body {
            background: rgba(90, 194, 255, 1);
        }

        .tips {
            margin: 15px;
            font-size: 13px;
            font-weight: 400;
            color: rgba(255, 255, 255, 1);
            line-height: 13px;
            text-align: center;
        }

        .row {
            margin: 15px;
            padding: 0 15px;
            background: rgba(255, 255, 255, 1);
            box-shadow: 0px 4px 10px 0px rgba(0, 135, 214, 0.37);
            border-radius: 8px;
        }

        .head {
            height: 44px;
        }

        .head-2 {
            height: 66px;
        }

        .line {
            width: 100%;
            height: 1px;
            background: rgba(212, 212, 212, 1);
            transform: scaleY(0.5);
        }

        .text-success {
            line-height: 23px;
            font-size: 15px;
            font-weight: 600;
            color: rgba(1, 184, 172, 1);
        }

        .text-fail {
            line-height: 23px;
            font-size: 15px;
            font-weight: 600;
            color: rgba(25, 25, 25, 1);
        }

        .text-cause {
            line-height: 23px;
            font-size: 13px;
            font-weight: 400;
            color: rgba(226, 83, 83, 1);
        }

        .item {
            margin: 10px 0;
        }

        .img {
            width: 60px;
            height: 80px;
            min-width: 60px;
            margin-right: 12px;
        }

        .title {
            height: 36px;
            font-size: 14px;
            font-weight: 500;
            color: rgba(51, 51, 51, 1);
            line-height: 18px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }

        .time {
            font-size: 14px;
            font-weight: 400;
            color: rgba(51, 51, 51, 1);
            margin-top: 25px;
        }

        .bottom {
            height: 46px;
        }

        .on-off {
            width: 15px;
            height: 15px;
            margin-right: 8px;
        }

        .count {
            font-size: 13px;
            font-weight: 400;
            color: rgba(128, 128, 128, 1);
        }

        .integral {
            font-size: 15px;
            font-weight: 400;
            color: rgba(25, 25, 25, 1);
        }

        .integral span {
            font-size: 15px;
            font-weight: 500;
            color: rgba(255, 101, 24, 1);
            margin-left: 5px;
        }

        .fixed {
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 50px;
            padding: 0 15px;
            background: rgba(255, 255, 255, 1);
            box-shadow: 0px 1px 0px 0px rgba(212, 212, 212, 1);
        }

        .checkbox {
            width: 16px;
            height: 16px;
            background-image: url("../../image/ui/radio_2.png");
            background-size: 100% 100%;
            margin-right: 8px;
            -webkit-appearance: none;
        }

        .checkbox:checked {
            background-image: url("../../image/ui/checked_2.png");
            background-size: 100% 100%;
        }

        .checkbox-text {
            font-size: 15px;
            font-weight: 400;
            color: rgba(25, 25, 25, 1);
        }

        .delete {
            width: 80px;
            height: 32px;
            background: rgba(226, 83, 83, 1);
            border-radius: 16px;
            font-size: 15px;
            font-weight: 400;
            color: rgba(255, 255, 255, 1);
            line-height: 21px;
        }

        .navs {
            z-index: 999;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 50px;
            background: rgba(90, 194, 255, 1);
        }

        .nav {
            font-size: 15px;
            font-weight: 500;
            color: rgba(255, 255, 255, 0.8);
        }

        .active {
            position: relative;
            font-size: 16px;
            font-weight: 600;
            color: rgba(255, 255, 255, 1);
            overflow: visible !important;
        }

        .active::after {
            content: "";
            position: absolute;
            bottom: -9px;
            left: 50%;
            transform: translateX(-50%);
            width: 20px;
            height: 3px;
            background: rgba(255, 255, 255, 1);
            border-radius: 2px;
        }
    </style>
</head>

<body>
    <div class="vueApp" v-cloak>
        <div class="navs" data-flex="cross:center">
            <div :class="navActive === 0 ? 'active nav' : 'nav'" @click="handleTab(0)" data-flex-box="1"
                data-flex="main:center cross:center">视频</div>
            <div :class="navActive === 1 ? 'active nav' : 'nav'" @click="handleTab(1)" data-flex-box="1"
                data-flex="main:center cross:center">课件</div>
        </div>
        <div style="height: 50px"></div>
        <div class="tips">
            注:&nbsp;请登录lew.gt-english.com上传课程
        </div>
        <div v-if="listData.length > 0">
            <div class="row" v-for="item,index in listData">
                <div v-if="navActive == 0">
                    <!-- 视频 -->
                    <div :class="item.vertify == 3 ? 'head-2' : 'head'" data-flex="main:justify cross:center">
                        <div>
                            <div :class="item.vertify == 2 ? 'text-success' : 'text-fail'">
                                {{ item.vertify == 1 ? '审核中' :  (item.vertify == 2 ? '已通过' : '未通过')}}
                            </div>
                            <div class="text-cause" v-if="item.vertify == 3">{{ item.detail }}</div>
                        </div>
                        <input class="checkbox" @click="handleCheck(index)" v-if="type == 2" type="checkbox"
                            :checked="item.checked" style="margin-right: 0">
                    </div>
                </div>
                <div v-else>
                    <!-- 课件 -->
                    <div class="head" data-flex="main:justify cross:center">
                        <div>
                            <div :class="item.examineStatus != 2 ? 'text-success' : 'text-fail'">
                                {{ item.examineStatus|kjText}}
                            </div>
                            <div class="text-cause" v-if="item.examineStatus == 2">{{ item.examineReason }}</div>
                        </div>
                        <input class="checkbox" @click="handleCheck(index)" v-if="type == 2" type="checkbox"
                            :checked="item.checked" style="margin-right: 0">
                    </div>
                </div>
                <div class="line"></div>
                <div class="item" data-flex>
                    <div class="img" v-if="item.pic">
                        <img :src="item.pic" alt="">
                    </div>
                    <div data-flex-box="1">
                        <div class="title">
                            {{ item.name || item.courseWareExamineName }}
                        </div>
                        <div class="time" v-if="item.lengthTime">时长:{{ item.lengthTime || '00:00' }}</div>
                    </div>
                </div>
                <div class="line"></div>
                <div class="bottom" data-flex="main:justify cross:center">
                    <div data-flex="cross:center">
                        <div class="on-off" v-show="navActive === 0">
                            <img src="../../image/ui/play_3.png" alt="">
                        </div>
                        <div class="count" v-if="navActive === 0">
                            播放量:{{ item.playCount || 0 }}
                        </div>
                        <div class="count" v-if="navActive === 1">
                            购买量:{{ item.buyNum || 0 }}
                        </div>
                    </div>
                    <div class="integral">
                        获得积分:<span>{{ item.giftPoint || item.integralNum || 0 }}</span>
                    </div>
                </div>
            </div>
        </div>
        <div v-else-if="isLoad" class="data-null">
            <p>暂时没有更多数据哦</p>
        </div>
        <div class="fixed" v-if="type == 2" data-flex="main:justify cross:center">
            <div data-flex="cross:center">
                <input class="checkbox" v-model="allChecked" onclick="handleAllChecked()" type="checkbox" :checkbox="allChecked">
                <div class="checkbox-text">全选</div>
            </div>
            <div class="delete" data-flex="main:center cross:center" @click="deleteUpload()">
                删除
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/service/service-tool.js"></script>
<script type="text/javascript" src="../../script/service/service-app.js"></script>
<script type="text/javascript" src="../../script/service/service-user.js"></script>
<script type="text/javascript" src="../../script/service/service-logic.js"></script>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript">
    // html 的引号一律为双引号(""),js 为单引号('')
    var USER, $S, vm;
    var kjTextMap = ["待审核", "待发布", "已拒绝", "待提交", "已发布"];
    var isHandle = false;
    apiready = function () {
        $S = SERVICE();
        USER = USER();
        console.log(JSON.stringify(api.pageParam) + '=====pageParam');
        fnInit();
    };
    // 初始化
    function fnInit() {
        vm = new Vue({
            el: '.vueApp',
            data: {
                allChecked: false,
                isLoad: false,
                type: 1,
                pageNo: 1,
                pageSize: 10,
                listData: [],
                navActive: 0
            },
            filters: {
                kjText: function(sender) {
                    return kjTextMap[sender];
                }
            },
            watch: {
                // allChecked: function () {
                //     if(!isHandle) {
                //         this.listData = setPropertyInArray(this.listData, 'checked', this.allChecked);
                //     }
                // },
                navActive: function() {
                    getPageData('headerRefreshing');
                }
            }
        });
        load();
    }

    // 切换tab
    function handleTab(active) {
        if(active == vm.navActive) {
            return;
        }else if(vm.type == 2) {
            fnToast('编辑中，不能切换');
        }else {
            vm.navActive = active;
            vm.allChecked = false;
            vm.listData = setPropertyInArray(vm.listData, 'checked', vm.allChecked);
        }
    }

    // 全选 取消全选
    function handleAllChecked() {
        vm.allChecked = !vm.allChecked;
        vm.listData = setPropertyInArray(vm.listData, 'checked', vm.allChecked);
    }

    // 选中
    function handleCheck(index) {
        isHandle = false;
        vm.listData[index].checked = !vm.listData[index].checked;
        if(!vm.listData[index].checked) {
            isHandle = true;
        }
        var ids = [];
        vm.listData.forEach(function (item) {
            if (item.checked) {
                ids.push(item.id);
            }
        });
        if(ids.length == vm.listData.length) {
            vm.allChecked = true;
        }else {
            vm.allChecked = false;
        }
    }

    function load() {
        getPageData('headerRefreshing');
        fnAddHeaderRefreshingEvent(function () { //设置下拉刷新
            getPageData('headerRefreshing');
        });

        fnAddFooterLoadingEvent(function () { // 设置上拉加载
            getPageData('load');
        });
    }

    // 获取页面数据
    function getPageData(sign) {
        if (sign == 'headerRefreshing') {
            vm.pageNo = 1;
        } else {
            vm.pageNo++;
        }
        var url = 'my/findUploadVideoList';
        if(vm.navActive === 1) {
            url = 'courseWare/findMyUploadCourseWareList';
        }
        var params = {
            'pageNo': vm.pageNo,
            "pageSize": vm.pageSize
        };
        var callback = function (data) {
            if (vm.pageNo == '1') {
                vm.listData = [];
            }
            var listData = data.listData;
            for (var i = 0; i < listData.length; i++) {
                var item = listData[i];
                // item.lengthTime = tsDate(item.lengthTime);
                item.checked = false;
            }
            api.refreshHeaderLoadDone();
            vm.listData = vm.listData.concat(listData);
            vm.isLoad = true;
            // status 为200时,只返回data
        };
        POST(url, params, callback);
    }

    function headerFn() {
        vm.type = 2;
        api.execScript({
            name: api.winName,
            script: "fnSetBtnInfo('取消','cancelFn');"
        })
    }

    function cancelFn() {
        vm.type = 1;
        api.execScript({
            name: api.winName,
            script: "fnSetBtnInfo('管理','headerFn');"
        });
    }

    function deleteUpload() {
        // 获取当前所有为选中的项
        var ids = [];
        vm.listData.forEach(function (item) {
            if (item.checked) {
                ids.push(item.id);
            }
        });
        if(ids.length === 0) {
            fnToast('至少选中一项');
            return;
        }
        var params = {
            "entityName": 'stuVideo',
            "id": ids.toString()
        };
        var url = 'common/deleteById';
        if(vm.navActive === 1) {
            url = 'courseWare/deleteMyUploadCourseWare';
            // 删除课件的参数为 ids
            params.ids = ids.toString();
        }
        var callback = function (data) {
            fnToast('删除成功');
            getPageData('headerRefreshing');
        };
        POST(url, params, callback);
    }
</script>

</html>